import React, { memo, useEffect, useState, useRef } from "react";
import { Alert, Button, Form, Row, Col, Radio, message } from "antd";
import CommonModal from "@/components/CommonModal";
import Typography from "@/views/components/Typography";
import { Input, InputNumber } from "@/views/components/PrefixPlaceholder";

import IconFont from "@/components/IconFont";
import { getChangePriceConfigInfo, submitChangePriceConfig } from "../../../service";
import { ClockCircleOutlined } from "@ant-design/icons";
import LogModal from "./LogModal";

const WrapInputNumber = props => {
	return <InputNumber {...props} controls={false} style={{ width: "100%" }} allowClear />;
};

const ModalForm = ({ visible, setVisible, wrapRef }) => {
	const [isEnabled, setIsEnabled] = useState(false);
	const [form] = Form.useForm();
	useEffect(() => {
		getChangePriceConfigInfo().then(res => {
			form.setFieldsValue(res.data);
			setIsEnabled(res.data.isEnabled);
		});
	}, []);

	const renderForm = () => (
		<>
			<Form
				form={form}
				style={{ marginTop: 20 }}
				onValuesChange={o => {
					if (o.hasOwnProperty("isEnabled")) {
						setIsEnabled(o.isEnabled);
						if (!o.isEnabled) {
							// 清空报错
							form.setFields([
								{ name: "num", errors: [] },
								{ name: "price", errors: [] }
							]);
						}
					}
				}}
				onFinish={() => {
					submitChangePriceConfig(form.getFieldsValue()).then(res => {
						setVisible(false);
						message.success("提交成功");
					});
				}}
			>
				<Row style={{ display: "flex", justifyContent: "space-between" }}>
					<Col span={11}>
						<Form.Item
							label=""
							name="num"
							rules={[
								{
									required: isEnabled,
									message: <span style={{ fontSize: 12 }}>先填入改价次数</span>,
									type: "number",
									min: 0,
									style: { border: "1px solid red" }
								}
							]}
						>
							<WrapInputNumber disabled={!isEnabled} required={isEnabled} min={0} placeholder="改价次数"></WrapInputNumber>
						</Form.Item>
					</Col>
					<Col span={11}>
						<Form.Item
							label=""
							name="price"
							rules={[{ required: isEnabled, message: <span style={{ fontSize: 12 }}>先填入改价金额</span> }]}
						>
							<WrapInputNumber
								disabled={!isEnabled}
								required={isEnabled}
								precision={2}
								min={0}
								placeholder="改价金额"
							></WrapInputNumber>
						</Form.Item>
					</Col>
				</Row>

				<Form.Item label="是否开启设置" name="isEnabled">
					<Radio.Group>
						<Radio value={1}>是</Radio>
						<Radio value={0}>否</Radio>
					</Radio.Group>
				</Form.Item>
				<Form.Item label="&nbsp;&nbsp;&nbsp;拿货员改价" name="isAllowed">
					<Radio.Group>
						<Radio value={1}>允许</Radio>
						<Radio value={0}>不允许</Radio>
					</Radio.Group>
				</Form.Item>
			</Form>
		</>
	);

	return (
		<CommonModal
			title={
				<div style={{ position: "relative", width: "100%" }}>
					改价设置
					<LogModal wrapRef={wrapRef} />
				</div>
			}
			visible={visible}
			onCancel={() => {
				setVisible(false);
			}}
			onOk={() => {
				form.validateFields().then(() => {
					form.submit();
				});
			}}
			// bodyStyle={{ height: "258px" }}
			width="642px"
			destroyOnClose
		>
			<Alert
				showIcon
				message={
					<div style={{ fontSize: 12, color: "#4E5969" }}>
						<div>1.一周内商品改价金额高于原拿货价的次数，超出所设置的次数时，需要您审核是否生成新的会员价；</div>
						<div>2.改价金额高于原拿货价时，差额每超出设置的金额，需要您审核是否生成新的会员价；</div>
						<div>3.无会员价商品首次改价高于采购价时，一定会生成审核。</div>
					</div>
				}
			></Alert>
			{renderForm()}
		</CommonModal>
	);
};

const ChangePriceConfig = ({}) => {
	const [visible, setVisible] = useState(false);
	const wrapRef = useRef();
	return (
		<div ref={wrapRef}>
			<Button onClick={() => setVisible(true)}>改价设置</Button>
			{visible && <ModalForm wrapRef={wrapRef} visible={visible} setVisible={setVisible} />}
		</div>
	);
};
export default memo(ChangePriceConfig);
